import React, { useEffect, useState } from "react";
import { Modal, Form, Input, Row, Col, Space, Radio, Cascader } from "antd";
import { modalPropsType } from '@/constants/types';
import { useModel } from "@umijs/max";
import { useComponentDidMount } from "@/hooks";

const {Item} = Form;
const rules = [{required: true, message: '此项必填'}];
const layout = {
  labelCol: {
    span: 6
  }
}

const WarehouseUpdateModal = ({title, currentRow, onSubmit, loading, onCancel, visible}: modalPropsType ) => {
  const [form] = Form.useForm();
  const { getDict } = useModel('dictModel');
  const { areaData, fetchAreaData } = useModel('areaModel');
  const warehouseTypes = getDict('warehouseType');

  console.log('areaData', areaData);


  const handleSubmit = async () => {
    const res = await form.validateFields();
    const [province, city, area] = res?.areaList || [];
    onSubmit({
      ...res,
      province, city, area,
      areaList: undefined
    });
  }

  useEffect(() => {
    if (currentRow?.id) {
      form.setFieldsValue({
        ...currentRow, 
        areaList: currentRow?.province && currentRow?.city && currentRow?.area ? [currentRow?.province, currentRow?.city, currentRow?.area] : []
      });
    }
  }, [currentRow?.id]);
  
  useComponentDidMount(() => {
    fetchAreaData();
  })
  
  return (
    <Modal
      title={title}
      open={visible}
      width="800px"
      maskClosable={false}
      confirmLoading={loading}
      onOk={handleSubmit}
      onCancel={onCancel}
     >
      <Form form={form} {...layout}>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="name" rules={rules} label="仓库简称">
              <Input />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="code" rules={rules} label="仓库代码">
              <Input disabled={!!currentRow} />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="type" rules={rules} label="类型">
              <Radio.Group options={warehouseTypes.map((v: {dictLabel: string; dictValue: string;}) => ({label: v.dictLabel, value: v.dictValue}))} />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="contacts" rules={rules} label="联系人">
              <Input />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="tel" rules={rules} label="联系电话">
              <Input />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={24}>
            <Item label="仓库地址" labelCol={{span: 3}}>
              <Space direction="horizontal">
                <Item name="areaList" rules={rules} noStyle>
                  <Cascader showSearch style={{width: 250}} fieldNames={{label: 'name', value: 'name', children: 'children'}} options={areaData} />
                </Item>
                <Item name="address" noStyle rules={rules}>
                  <Input />
                </Item>
              </Space>
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item required label="营业时间">
              <Space>
                <Item noStyle name="openingTime" rules={[{required: true, message: '请输入开始时间'}]}>
                  <Input />
                </Item>
                <span style={{lineHeight: '32px'}}>-</span>
                <Item noStyle name="closingTime" rules={[{required: true, message: '请输入结束时间'}]}>
                  <Input />
                </Item>
              </Space>
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={24}>
            <Item name="remark" label="备注" labelCol={{span: 3}}>
              <Input.TextArea rows={3} />
            </Item>
          </Col>
        </Row>
      </Form>
     </Modal>
  );
}
export default WarehouseUpdateModal;